<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>计算驾车时间与距离</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}

			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 1;
			}

			.map_img_box {
				width: 90%;
				height: 90px;
				background-color: #fff;
				position: fixed;
				top: 80%;
				margin-left: 5%;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				z-index: 999;
			}

			.map_box {
				width: 90%;
				height: 90px;
				background-color: #fff;
				position: fixed;
				top: 78%;
				margin-left: 5%;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				z-index: 999;

			}

			.map_box_title {
				font-size: 19px;
				font-weight: 600;
				color: #202020;
				margin-left: 5%;
			}

			.map_box_cuont {
				font-size: 13px;
				color: #777777;
				margin-left: 5%;
				margin-top: 2%;
				width: 70%;
			}

			.map_img {
				width: 25px;
				height: 25px;
			}

			.map_tetxt {
				font-size: 11px;
				color: #00A0E9;
			}

			.map_img_icon {
				margin-right: 5%;
				text-align: center;
			}
			.call_box{
				width: 44px;
				height: 44px;
				background-color: #fff;
				z-index: 9999;
				position: fixed;
				left: 5%;
				top: 45%;
				border-radius: 4px;
				text-align: center;
				font-size: 10px;
			}
			.order_box{
				width: 44px;
				height: 44px;
				background-color: #fff;
				z-index: 9999;
				position: fixed;
				left: 5%;
				top: 55%;
				border-radius: 4px;
				text-align: center;
				font-size: 10px;
			}
		</style>
	</head>
	<body>
		<div id='allmap'></div>



		<div class="map_box">
			<div style="width: 90%;">
				<div class="map_box_title" id="adressName">正在加载中....</div>
				<div class="map_box_cuont" id='dome_JUli'>正在加载中....</div>
			</div>
			<div class="map_img_icon" id="daohang">
				<img src="../carType/Mapdao.png" alt="" class="map_img">
				<div class="map_tetxt">导航</div>
			</div>
		</div>
		
		<div class="call_box" id="phone">
			<div style="height: 5px;"></div>
			<img src="../carType/call.png" alt="" width="16" height="16">
			<div>打电话</div>
		</div>
		<div class="order_box" id="dete">
			<div style="height: 5px;"></div>
			<img src="../carType/order.png" alt="" width="16" height="16">
			<div>回订单</div>
		</div>
		<!-- <div class="map_img_box">
			<div class="map_img_icon" style="margin-left: 6%;z-index: 999;" id="phone">
				<img src="../carType/phone.png" alt="" width="17" height="17">
				<div class="map_tetxt" style="color: #666666;">打电话</div>
			</div>
			<div class="map_img_icon">
				<img src="../carType/information.png" alt="" width="20" height="17" id="msg">
				<div class="map_tetxt" style="color: #666666;">发信息</div>
			</div>
			<div class="map_img_icon">
				<img src="../carType/orderForGoods.png" alt="" width="15" height="19" id="dete">
				<div class="map_tetxt" style="color: #666666;">订单详情</div>
			</div>
			<div class="map_img_icon">
				<img src="../carType/share.png" alt="" width="18.5" height="19" id="share">
				<div class="map_tetxt" style="color: #666666;">行程分享</div>
			</div>
		</div> -->
	</body>
	<script type="text/javascript" src="https://res.wx.qq.com/ope
	n/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.
	dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>

	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>
	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			var mood = plus.storage.getItem('mood');
			mood = JSON.parse(mood)
			var map = new BMapGL.Map("allmap"); // 创建地图实例
			// var point = new BMapGL.Point(106.55734639, 29.61560503); // 创建点坐标 
			map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 
			map.setZoom(17)


			if (!mood.name) {
				let geolocation = new BMapGL.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
						var start = new BMapGL.Point(r.point.lng, r.point.lat);
						var end = new BMapGL.Point(mood.lngEnd, mood.latEnd);
						transit.search(start, end);
					} else {}
				});
			}
			
			
			var output = "剩余需要";
			var searchComplete = function(results) {
				if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
					return;
				}
				var plan = results.getPlan(0);
				output += plan.getDistance(true);
				output += plan.getDuration(true); //获取时间
				biaDiv(output)
			}
			var transit = new BMapGL.DrivingRoute(map, {
				renderOptions: {
					map: map
				},
				onSearchComplete: searchComplete,
				onPolylinesSet: function() {
					// setTimeout(function(){alert(output)},"1000");
				}
			});
			var start
			if (mood.name) {
				 start = new BMapGL.Point(mood.lng, mood.lat);
				var end = new BMapGL.Point(mood.lngEnd, mood.latEnd);
				transit.search(start, end);
			}




			function biaDiv(e) {
				var dir = document.getElementById('dome_JUli')
				dir.innerText = e
				var adress = document.getElementById('adressName')
				adress.innerText = mood.nameEnd
			}

			var phone = document.getElementById("phone");
			phone.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 0
					}
				});
			}, false)

			var msg = document.getElementById("msg");
			msg.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 1
					}
				});
			}, false)

			var dete = document.getElementById("dete");
			dete.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 2
					}
				});
			}, false)
			
			var share = document.getElementById("share");
			share.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 3
					}
				});
			}, false)
			
			var daohang = document.getElementById("daohang");
			daohang.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 4
					}
				});
			}, false)
		})
	</script>






</html>